<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>0520-js作业-螺旋-闭包购物车</title>
    <style type="text/css">
        html,input{font-family: "Microsoft YaHei";}
        p,ul,li,input{margin: 0;padding: 0;}
        img{vertical-align: middle;}
        ul{list-style: none;}
        i{font-style: normal;}
        a{text-decoration: none;}
        body{
            margin: 0;
            cursor: default;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .wrap{
            margin: 20px auto;
            width: 1000px;
        }
        .title,.list,.list li,.total{
            width: 100%;
            overflow: hidden;
        }
        .title li,.list p{
            float: left;
            width: 25%;
            font-size: 14px;
            text-align: center;
            box-sizing: border-box;
        }
        .title{
            background-color: #0442c8;
        }
        .title li{
            height: 40px;
            border-top: 1px solid #006eff;
            border-bottom: 1px solid #006eff;
            border-right: 1px solid #006eff;
            color: #fff;
            line-height: 40px;
        }
        .title li:nth-child(1){
            border-left: 1px solid #006eff;
        }
        .list li:hover{
            background-color: rgba(0,110,255,.1);
        }
        .list p{
            border-right: 1px solid #006eff;
            border-bottom: 1px solid #006eff;
            height: 120px;
            line-height: 120px;
        }
        .list p:nth-child(1){
            border-left: 1px solid #006eff;
        }
        .list p img{
            width: 100px;
        }
        .list p .add,.list p .cut{
            display: inline-block;
            width: 27px;
            height: 27px;
            line-height: 27px;
            text-align: center;
        }
        .list p .add,.list p .cut{
            background-color: #ffbb00;
            cursor: pointer;
        }

        .list p .num{
            display: inline-block;
            width: 50px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #bbb;
            line-height: 25px;
            text-align: center;
        }
        .total{
            margin-top: 10px;
            height: 50px;
            background-color: #0442c8;
            color: #fff;
            font-size: 14px;
            line-height: 50px;
        }
        .total span{
            float: right;
            width: 25%;
            text-align: center;
        }
        .total span i{
            font-size: 20px;
            color: #ffc700;
        }
    </style>
</head>
<body>
    <section class="wrap">
        <ul class="title">
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
        </ul>
        <ul class="list">
            <li>
                <p><img src="images/1.jpg" alt="商品图"></p>
                <p class="price">189</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
            <li>
                <p><img src="images/2.jpg" alt="商品图"></p>
                <p class="price">99</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
            <li>
                <p><img src="images/3.jpg" alt="商品图"></p>
                <p class="price">109</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
            <li>
                <p><img src="images/4.jpg" alt="商品图"></p>
                <p class="price">89</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
        </ul>
        <p class="total">
            <span>总计金额：<i></i> 元</span>
            <span>已选商品: <i></i> 件</span>
        </p>
    </section>
</body>
<script>
    var oList = document.getElementsByClassName('list')[0],
        oItemL = oList.getElementsByTagName('li').length,//列表的行数 支持扩展li的行数
        oPri = document.getElementsByClassName('price'),
        oPriT = document.getElementsByClassName('price-t'),
        oCut = document.getElementsByClassName('cut'),
        oAdd = document.getElementsByClassName('add'),
        oNum = document.getElementsByClassName('num'),
        oTot = document.getElementsByClassName('total')[0],
        oNumT = oTot.getElementsByTagName('i')[1],//已选商品的<i>标签
        oPriTT = oTot.getElementsByTagName('i')[0],//总计金额的<i>标签
        nNumt = 0,//已选商品的总值
        nPritt = 0;//总计金额的总值

    for(var i=0;i<oItemL;i++){
        (function (i){
            //加号按钮事件开始
            oAdd[i].onmouseenter = function(){
                oAdd[i].style.backgroundColor = '#ffe700';
            };
            oAdd[i].onmouseleave = function(){
                oAdd[i].style = '';
            };
            oAdd[i].onclick = function(){
                oNum[i].innerHTML ++;
                oPriT[i].innerHTML = oNum[i].innerHTML * oPri[i].innerHTML;
                nNumt ++;
                nPritt += Number(oPri[i].innerHTML);
                fnTT();//生成总计数值
                fnCutSE();//点击加号按钮后 如果个数大于0 则使减号按钮恢复默认状态
            };
    
            //减号按钮事件开始
            oCut[i].onmouseenter = function (){
                if(oNum[i].innerHTML>0){
                    oCut[i].style.backgroundColor = '#ffe700';
                }
            };
            oCut[i].onmouseleave = function(){
                fnCutSE();//如果个数大于0 则使减号按钮恢复默认状态
            };
            oCut[i].onclick = function(){
                if(oNum[i].innerHTML>0){
                    oNum[i].innerHTML --;
                    oPriT[i].innerHTML = oNum[i].innerHTML * oPri[i].innerHTML;
                    nNumt --;
                    nPritt -= Number(oPri[i].innerHTML);
                    fnTT();//生成总计数值
                }
                //点击减号按钮后 如果个数小于1 则使减号按钮变灰 不可点击
                if(oNum[i].innerHTML<1){
                    oCut[i].style.backgroundColor = '#ddd';
                    oCut[i].style.color = '#999';
                    oCut[i].style.cursor = 'default';
                }
            };
            
            //数量大于0时 减号按钮行内样式清空 恢复默认状态
            function fnCutSE(){
                if(oNum[i].innerHTML>0){
                    oCut[i].style = '';
                }
            }
        })(i);
        
        //页面加载完毕时 先生成默认数值
        oPriT[i].innerHTML = oNum[i].innerHTML * oPri[i].innerHTML;
        nNumt += Number(oNum[i].innerHTML);
        nPritt += Number(oPri[i].innerHTML);
    }//循环结束
    

    //生成总计数值的函数
    function fnTT(){
        oNumT.innerText = nNumt;
        oPriTT.innerHTML = nPritt;
    }
    fnTT();//页面加载完毕时 先执行一次函数fnTT 生成初始状态数值
    
</script>
</html>